<template>
  <div class="container">
    <div style="position: relative;">
      <div style="display: flex;align-items: center;margin-top: 5px;margin-left: 10px;">
        <div style="width: 10px;height: 35px;background: #0060bf;">
        </div>
        <div style="margin-left: 10px;font-size: 20px;">未结案件全流程案件统计</div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="审判流程" name="first">
          <div style="padding-right: 10px;">
            <div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div
                      style="height: calc(100vh - 400px);display: flex;align-items: center;justify-content: center;flex-direction: column;">
                    <el-tag>全部案件</el-tag>
                    <div id="echarts1" style="width: 100%;height: 100%;padding-top: 15px;"></div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div
                      style="height: calc(100vh - 400px);display: flex;align-items: center;justify-content: center;flex-direction: column;">
                    <el-tag>民事案件</el-tag>
                    <div id="echarts2" style="width: 100%;height: 100%;padding-top: 15px;"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div style="padding-right: 10px;overflow:hidden;">
              <div>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div
                        style="height: calc(100vh - 410px);display: flex;align-items: center;justify-content: center;flex-direction: column;">
                      <el-tag>刑事案件</el-tag>
                      <div id="echarts3" style="width: 100%;height: 100%;padding-top: 15px;"></div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div
                        style="height: calc(100vh - 410px);display: flex;align-items: center;justify-content: center;flex-direction: column;">
                      <el-tag>行政案件</el-tag>
                      <div id="echarts4" style="width: 100%;height: 100%;padding-top: 15px;"></div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="执行流程" name="second">
          <div style="height: calc(100vh - 144px);padding-right: 10px;">
            <div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div
                      style="height: calc(100vh - 400px);display: flex;align-items: center;justify-content: center;flex-direction: column;">
                    <el-tag>全部案件</el-tag>
                    <div id="echarts5" style="width: 100%;height: 100%;padding-top: 15px;"></div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div
                      style="height: calc(100vh - 400px);display: flex;align-items: center;justify-content: center;flex-direction: column;">
                    <el-tag>民事案件</el-tag>
                    <div id="echarts6" style="width: 100%;height: 100%;padding-top: 15px;"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div style="height: calc(100vh - 448px);padding-right: 10px;overflow:hidden;">
              <div>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div
                        style="height: calc(100vh - 410px);display: flex;align-items: center;justify-content: center;flex-direction: column;">
                      <el-tag>刑事案件</el-tag>
                      <div id="echarts7" style="width: 100%;height: 100%;padding-top: 15px;"></div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div
                        style="height: calc(100vh - 410px);display: flex;align-items: center;justify-content: center;flex-direction: column;">
                      <el-tag>行政案件</el-tag>
                      <div id="echarts8" style="width: 100%;height: 100%;padding-top: 15px;"></div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div
          style="position: absolute;right: 100px;top:10px;width: 260px;display: flex;align-items: center;padding-top: 5px;">
        <span style="margin-right: 10px;">日期</span>
        <el-date-picker
            style="width: 180px;margin-right: 20px;"
            v-model="currentDate"
            @change="dateChange"
            type="date"
            format="yyyy年MM月dd日"
            value-format="yyyy年MM月dd日"
            placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import axios, {all} from 'axios'
import data from "@/assets/data1.json";
import detailData from "@/json/data/detail.json";
import slJsonData from "@/json/data/未结案件全流程统计-审理.json";
import user from "@/json/db/user.json";
import api from "@/utils/api";

export default {
  mounted() {
    this.addLog()
    var year = this.currentDate.getFullYear();
    var month = String(this.currentDate.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的，所以需要加 1
    var day = String(this.currentDate.getDate()).padStart(2, '0');
    this.currentDate = `${year}年${month}月${day}日`;
    this.handleData1()
    this.initCharts1()
    this.initCharts2()
    this.initCharts3()
    this.initCharts4()
  },
  data() {
    return {
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myOption1: null,
      myOption2: null,
      myOption3: null,
      myOption4: null,
      myChart5: null,
      myChart6: null,
      myChart7: null,
      myChart8: null,
      myOption5: null,
      myOption6: null,
      myOption7: null,
      myOption8: null,
      currentDate: new Date(),
      activeName: 'first',
      civilCase: {
        title: '',
        decreasedYesterdayList: [],
        existingCasesList: [],
        addedTodayList: []
      },
      criminalCase: {
        title: '',
        decreasedYesterdayList: [],
        existingCasesList: [],
        addedTodayList: []
      },
      administrativeCase: {
        title: '',
        decreasedYesterdayList: [],
        existingCasesList: [],
        addedTodayList: []
      },
      allCase: {
        title: '',
        decreasedYesterdayList: [],
        existingCasesList: [],
        addedTodayList: []
      },
    }
  },
  methods: {
    addLog() {
      const user = require("@/json/db/user.json")
      const obj = {}
      obj.module = '全流程信息统计'
      obj.content = '查看了【未结案件全流程信息统计】'
      obj.userName = user.userName
      api.addLog(obj);
    },
    dateChange(date) {
      if (this.activeName ==='first'){
        this.handleData1()
        if (this.myChart1 && this.myOption1) {
          this.myOption1.series[0].data = this.allCase.decreasedYesterdayList
          this.myOption1.series[2].data = this.allCase.existingCasesList
          this.myOption1.series[1].data = this.allCase.addedTodayList
          this.myChart1.setOption(this.myOption1);
        }

        if (this.myChart2 && this.myOption2) {
          this.myOption2.series[0].data = this.civilCase.decreasedYesterdayList
          this.myOption2.series[2].data = this.civilCase.existingCasesList
          this.myOption2.series[1].data = this.civilCase.addedTodayList
          this.myChart2.setOption(this.myOption2);
        }

        if (this.myChart3 && this.myOption3) {
          this.myOption3.series[0].data = this.criminalCase.decreasedYesterdayList
          this.myOption3.series[2].data = this.criminalCase.existingCasesList
          this.myOption3.series[1].data = this.criminalCase.addedTodayList
          this.myChart3.setOption(this.myOption3);
        }

        if (this.myChart4 && this.myOption4) {
          this.myOption4.series[0].data = this.administrativeCase.decreasedYesterdayList
          this.myOption4.series[2].data = this.administrativeCase.existingCasesList
          this.myOption4.series[1].data = this.administrativeCase.addedTodayList
          this.myChart4.setOption(this.myOption4);
        }
      }else {
        this.handleData2()
        if (this.myChart5 && this.myOption5) {
          this.myOption5.series[0].data = this.allCase.decreasedYesterdayList
          this.myOption5.series[2].data = this.allCase.existingCasesList
          this.myOption5.series[1].data = this.allCase.addedTodayList
          this.myChart5.setOption(this.myOption5);
        }

        if (this.myChart6 && this.myOption6) {
          this.myOption6.series[0].data = this.civilCase.decreasedYesterdayList
          this.myOption6.series[2].data = this.civilCase.existingCasesList
          this.myOption6.series[1].data = this.civilCase.addedTodayList
          this.myChart6.setOption(this.myOption6);
        }

        if (this.myChart7 && this.myOption7) {
          this.myOption7.series[0].data = this.criminalCase.decreasedYesterdayList
          this.myOption7.series[2].data = this.criminalCase.existingCasesList
          this.myOption7.series[1].data = this.criminalCase.addedTodayList
          this.myChart7.setOption(this.myOption7);
        }

        if (this.myChart8 && this.myOption8) {
          this.myOption8.series[0].data = this.administrativeCase.decreasedYesterdayList
          this.myOption8.series[2].data = this.administrativeCase.existingCasesList
          this.myOption8.series[1].data = this.administrativeCase.addedTodayList
          this.myChart8.setOption(this.myOption8);
        }
      }


    },
    handleData1() {
      this.civilCase.decreasedYesterdayList = []
      this.civilCase.existingCasesList = []
      this.civilCase.addedTodayList = []
      this.civilCase.title = '民事案件'

      this.criminalCase.decreasedYesterdayList = []
      this.criminalCase.existingCasesList = []
      this.criminalCase.addedTodayList = []
      this.criminalCase.title = '刑事案件'

      this.administrativeCase.decreasedYesterdayList = []
      this.administrativeCase.existingCasesList = []
      this.administrativeCase.addedTodayList = []
      this.administrativeCase.title = '行政案件'

      this.allCase.decreasedYesterdayList = []
      this.allCase.existingCasesList = []
      this.allCase.addedTodayList = []
      this.allCase.title = '全部案件'

      var slJsonData = require('@/json/data/未结案件全流程统计-审理.json')
      var responseData = slJsonData.data
      //过滤出日期
      responseData = responseData.filter(t => t.date === this.currentDate)
      if (responseData.length > 0) {
        var processStage = responseData[0].process_stage

        if (processStage.length > 0) {
          var shouanObj = processStage.filter(p => p.type === '收案')[0]

          this.civilCase.decreasedYesterdayList.push(shouanObj.civil_decreased_yesterday)
          this.civilCase.existingCasesList.push(shouanObj.civil_existing_cases)
          this.civilCase.addedTodayList.push(shouanObj.civil_added_today)

          this.criminalCase.decreasedYesterdayList.push(shouanObj.criminal_decreased_yesterday)
          this.criminalCase.existingCasesList.push(shouanObj.criminal_existing_cases)
          this.criminalCase.addedTodayList.push(shouanObj.criminal_added_today)

          this.administrativeCase.decreasedYesterdayList.push(shouanObj.administrative_decreased_yesterday)
          this.administrativeCase.existingCasesList.push(shouanObj.administrative_existing_cases)
          this.administrativeCase.addedTodayList.push(shouanObj.administrative_added_today)

          this.allCase.decreasedYesterdayList.push(shouanObj.all_decreased_yesterday)
          this.allCase.existingCasesList.push(shouanObj.all_existing_cases)
          this.allCase.addedTodayList.push(shouanObj.all_added_today)

          var lianObj = processStage.filter(p => p.type === '立案')[0]

          this.civilCase.decreasedYesterdayList.push(lianObj.civil_decreased_yesterday)
          this.civilCase.existingCasesList.push(lianObj.civil_existing_cases)
          this.civilCase.addedTodayList.push(lianObj.civil_added_today)

          this.criminalCase.decreasedYesterdayList.push(lianObj.criminal_decreased_yesterday)
          this.criminalCase.existingCasesList.push(lianObj.criminal_existing_cases)
          this.criminalCase.addedTodayList.push(lianObj.criminal_added_today)

          this.administrativeCase.decreasedYesterdayList.push(lianObj.administrative_decreased_yesterday)
          this.administrativeCase.existingCasesList.push(lianObj.administrative_existing_cases)
          this.administrativeCase.addedTodayList.push(lianObj.administrative_added_today)

          this.allCase.decreasedYesterdayList.push(lianObj.all_decreased_yesterday)
          this.allCase.existingCasesList.push(lianObj.all_existing_cases)
          this.allCase.addedTodayList.push(lianObj.all_added_today)

          var shenliObj = processStage.filter(p => p.type === '审理')[0]

          this.civilCase.decreasedYesterdayList.push(shenliObj.civil_decreased_yesterday)
          this.civilCase.existingCasesList.push(shenliObj.civil_existing_cases)
          this.civilCase.addedTodayList.push(shenliObj.civil_added_today)

          this.criminalCase.decreasedYesterdayList.push(shenliObj.criminal_decreased_yesterday)
          this.criminalCase.existingCasesList.push(shenliObj.criminal_existing_cases)
          this.criminalCase.addedTodayList.push(shenliObj.criminal_added_today)

          this.administrativeCase.decreasedYesterdayList.push(shenliObj.administrative_decreased_yesterday)
          this.administrativeCase.existingCasesList.push(shenliObj.administrative_existing_cases)
          this.administrativeCase.addedTodayList.push(shenliObj.administrative_added_today)

          this.allCase.decreasedYesterdayList.push(shenliObj.all_decreased_yesterday)
          this.allCase.existingCasesList.push(shenliObj.all_existing_cases)
          this.allCase.addedTodayList.push(shenliObj.all_added_today)

          var jieanObj = processStage.filter(p => p.type === '结案')[0]

          this.civilCase.decreasedYesterdayList.push(jieanObj.civil_decreased_yesterday)
          this.civilCase.existingCasesList.push(jieanObj.civil_existing_cases)
          this.civilCase.addedTodayList.push(jieanObj.civil_added_today)

          this.criminalCase.decreasedYesterdayList.push(jieanObj.criminal_decreased_yesterday)
          this.criminalCase.existingCasesList.push(jieanObj.criminal_existing_cases)
          this.criminalCase.addedTodayList.push(jieanObj.criminal_added_today)

          this.administrativeCase.decreasedYesterdayList.push(jieanObj.administrative_decreased_yesterday)
          this.administrativeCase.existingCasesList.push(jieanObj.administrative_existing_cases)
          this.administrativeCase.addedTodayList.push(jieanObj.administrative_added_today)

          this.allCase.decreasedYesterdayList.push(jieanObj.all_decreased_yesterday)
          this.allCase.existingCasesList.push(jieanObj.all_existing_cases)
          this.allCase.addedTodayList.push(jieanObj.all_added_today)
        }

      }
    },
    handleData2() {
      this.civilCase.decreasedYesterdayList = []
      this.civilCase.existingCasesList = []
      this.civilCase.addedTodayList = []
      this.civilCase.title = '民事案件'

      this.criminalCase.decreasedYesterdayList = []
      this.criminalCase.existingCasesList = []
      this.criminalCase.addedTodayList = []
      this.criminalCase.title = '刑事案件'

      this.administrativeCase.decreasedYesterdayList = []
      this.administrativeCase.existingCasesList = []
      this.administrativeCase.addedTodayList = []
      this.administrativeCase.title = '行政案件'

      this.allCase.decreasedYesterdayList = []
      this.allCase.existingCasesList = []
      this.allCase.addedTodayList = []
      this.allCase.title = '全部案件'

      var slJsonData = require('@/json/data/未结案件全流程统计-执行.json')
      var responseData = slJsonData.data
      //过滤出日期
      responseData = responseData.filter(t => t.date === this.currentDate)
      console.log(responseData)
      if (responseData.length > 0) {
        var processStage = responseData[0].process_stage

        if (processStage.length > 0) {
          var shouanObj = processStage.filter(p => p.type === '收案')[0]

          this.civilCase.decreasedYesterdayList.push(shouanObj.civil_decreased_yesterday)
          this.civilCase.existingCasesList.push(shouanObj.civil_existing_cases)
          this.civilCase.addedTodayList.push(shouanObj.civil_added_today)

          this.criminalCase.decreasedYesterdayList.push(shouanObj.criminal_decreased_yesterday)
          this.criminalCase.existingCasesList.push(shouanObj.criminal_existing_cases)
          this.criminalCase.addedTodayList.push(shouanObj.criminal_added_today)

          this.administrativeCase.decreasedYesterdayList.push(shouanObj.administrative_decreased_yesterday)
          this.administrativeCase.existingCasesList.push(shouanObj.administrative_existing_cases)
          this.administrativeCase.addedTodayList.push(shouanObj.administrative_added_today)

          this.allCase.decreasedYesterdayList.push(shouanObj.all_decreased_yesterday)
          this.allCase.existingCasesList.push(shouanObj.all_existing_cases)
          this.allCase.addedTodayList.push(shouanObj.all_added_today)

          var lianObj = processStage.filter(p => p.type === '立案')[0]

          this.civilCase.decreasedYesterdayList.push(lianObj.civil_decreased_yesterday)
          this.civilCase.existingCasesList.push(lianObj.civil_existing_cases)
          this.civilCase.addedTodayList.push(lianObj.civil_added_today)

          this.criminalCase.decreasedYesterdayList.push(lianObj.criminal_decreased_yesterday)
          this.criminalCase.existingCasesList.push(lianObj.criminal_existing_cases)
          this.criminalCase.addedTodayList.push(lianObj.criminal_added_today)

          this.administrativeCase.decreasedYesterdayList.push(lianObj.administrative_decreased_yesterday)
          this.administrativeCase.existingCasesList.push(lianObj.administrative_existing_cases)
          this.administrativeCase.addedTodayList.push(lianObj.administrative_added_today)

          this.allCase.decreasedYesterdayList.push(lianObj.all_decreased_yesterday)
          this.allCase.existingCasesList.push(lianObj.all_existing_cases)
          this.allCase.addedTodayList.push(lianObj.all_added_today)

          var shenliObj = processStage.filter(p => p.type === '执行')[0]

          this.civilCase.decreasedYesterdayList.push(shenliObj.civil_decreased_yesterday)
          this.civilCase.existingCasesList.push(shenliObj.civil_existing_cases)
          this.civilCase.addedTodayList.push(shenliObj.civil_added_today)

          this.criminalCase.decreasedYesterdayList.push(shenliObj.criminal_decreased_yesterday)
          this.criminalCase.existingCasesList.push(shenliObj.criminal_existing_cases)
          this.criminalCase.addedTodayList.push(shenliObj.criminal_added_today)

          this.administrativeCase.decreasedYesterdayList.push(shenliObj.administrative_decreased_yesterday)
          this.administrativeCase.existingCasesList.push(shenliObj.administrative_existing_cases)
          this.administrativeCase.addedTodayList.push(shenliObj.administrative_added_today)

          this.allCase.decreasedYesterdayList.push(shenliObj.all_decreased_yesterday)
          this.allCase.existingCasesList.push(shenliObj.all_existing_cases)
          this.allCase.addedTodayList.push(shenliObj.all_added_today)

          var jieanObj = processStage.filter(p => p.type === '结案')[0]

          this.civilCase.decreasedYesterdayList.push(jieanObj.civil_decreased_yesterday)
          this.civilCase.existingCasesList.push(jieanObj.civil_existing_cases)
          this.civilCase.addedTodayList.push(jieanObj.civil_added_today)

          this.criminalCase.decreasedYesterdayList.push(jieanObj.criminal_decreased_yesterday)
          this.criminalCase.existingCasesList.push(jieanObj.criminal_existing_cases)
          this.criminalCase.addedTodayList.push(jieanObj.criminal_added_today)

          this.administrativeCase.decreasedYesterdayList.push(jieanObj.administrative_decreased_yesterday)
          this.administrativeCase.existingCasesList.push(jieanObj.administrative_existing_cases)
          this.administrativeCase.addedTodayList.push(jieanObj.administrative_added_today)

          this.allCase.decreasedYesterdayList.push(jieanObj.all_decreased_yesterday)
          this.allCase.existingCasesList.push(jieanObj.all_existing_cases)
          this.allCase.addedTodayList.push(jieanObj.all_added_today)
        }

      }
    },
    initCharts1() {
      var chartDom = document.getElementById('echarts1');
      var myChart = echarts.init(chartDom);
      this.myChart1 = myChart;
      var option;
      option = {
        grid: {
          top: '20%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['昨日结案', '今日新增', '存量案件']
        },
        xAxis: [
          {
            type: 'category',
            name: '案件阶段',
            data: ['收案', '立案', '审理', '结案'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 600,
            interval: 100,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '存量案件',
            min: 0,
            interval: 500,
            position: 'right', // 设置Y轴显示在右边
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '昨日结案',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.allCase.decreasedYesterdayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '今日新增',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.allCase.addedTodayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '存量案件',
            type: 'bar',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.allCase.existingCasesList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        ]
      };
      this.myOption1 = option;
      myChart.setOption(option);
    },
    initCharts2() {
      var chartDom = document.getElementById('echarts2');
      var myChart = echarts.init(chartDom);
      this.myChart2 = myChart;
      var option;
      option = {
        grid: {
          top: '20%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['昨日结案', '今日新增', '存量案件']
        },
        xAxis: [
          {
            type: 'category',
            name: '案件阶段',
            data: ['收案', '立案', '审理', '结案'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 600,
            interval: 100,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '存量案件',
            min: 0,
            interval: 500,
            position: 'right', // 设置Y轴显示在右边
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '昨日结案',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.civilCase.decreasedYesterdayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '今日新增',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.civilCase.addedTodayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '存量案件',
            type: 'bar',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.civilCase.existingCasesList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        ]
      };
      this.myOption2 = option;
      myChart.setOption(option);
    },
    initCharts3() {
      var chartDom = document.getElementById('echarts3');
      var myChart = echarts.init(chartDom);
      this.myChart3 = myChart;
      var option;
      option = {
        grid: {
          top: '20%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['昨日结案', '今日新增', '存量案件']
        },
        xAxis: [
          {
            type: 'category',
            name: '案件阶段',
            data: ['收案', '立案', '审理', '结案'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 600,
            interval: 100,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '存量案件',
            min: 0,
            interval: 500,
            position: 'right', // 设置Y轴显示在右边
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '昨日结案',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.criminalCase.decreasedYesterdayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '今日新增',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.criminalCase.addedTodayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '存量案件',
            type: 'bar',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.criminalCase.existingCasesList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        ]
      };
      this.myOption3 = option;
      myChart.setOption(option);
    },
    initCharts4() {
      var chartDom = document.getElementById('echarts4');
      var myChart = echarts.init(chartDom);
      this.myChart4 = myChart;
      var option;
      option = {
        grid: {
          top: '20%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['昨日结案', '今日新增', '存量案件']
        },
        xAxis: [
          {
            type: 'category',
            name: '案件阶段',
            data: ['收案', '立案', '审理', '结案'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 600,
            interval: 100,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '存量案件',
            min: 0,
            interval: 500,
            position: 'right', // 设置Y轴显示在右边
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '昨日结案',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.administrativeCase.decreasedYesterdayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '今日新增',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.administrativeCase.addedTodayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '存量案件',
            type: 'bar',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.administrativeCase.existingCasesList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        ]
      };
      this.myOption4 = option;
      myChart.setOption(option);
    },
    initCharts5() {
      var chartDom = document.getElementById('echarts5');
      var myChart = echarts.init(chartDom);
      this.myChart5 = myChart;
      var option;
      option = {
        grid: {
          top: '20%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['昨日结案', '今日新增', '存量案件']
        },
        xAxis: [
          {
            type: 'category',
            name: '案件阶段',
            data: ['收案', '立案', '审理', '结案'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 600,
            interval: 100,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '存量案件',
            min: 0,
            interval: 500,
            position: 'right', // 设置Y轴显示在右边
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '昨日结案',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.allCase.decreasedYesterdayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '今日新增',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.allCase.addedTodayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '存量案件',
            type: 'bar',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.allCase.existingCasesList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        ]
      };
      this.myOption5 = option;
      myChart.setOption(option);
    },
    initCharts6() {
      var chartDom = document.getElementById('echarts6');
      var myChart = echarts.init(chartDom);
      this.myChart6 = myChart;
      var option;
      option = {
        grid: {
          top: '20%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['昨日结案', '今日新增', '存量案件']
        },
        xAxis: [
          {
            type: 'category',
            name: '案件阶段',
            data: ['收案', '立案', '审理', '结案'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 600,
            interval: 100,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '存量案件',
            min: 0,
            interval: 500,
            position: 'right', // 设置Y轴显示在右边
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '昨日结案',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.civilCase.decreasedYesterdayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '今日新增',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.civilCase.addedTodayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '存量案件',
            type: 'bar',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.civilCase.existingCasesList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        ]
      };
      this.myOption6 = option;
      myChart.setOption(option);
    },
    initCharts7() {
      var chartDom = document.getElementById('echarts7');
      var myChart = echarts.init(chartDom);
      this.myChart7 = myChart;
      var option;
      option = {
        grid: {
          top: '20%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['昨日结案', '今日新增', '存量案件']
        },
        xAxis: [
          {
            type: 'category',
            name: '案件阶段',
            data: ['收案', '立案', '审理', '结案'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 600,
            interval: 100,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '存量案件',
            min: 0,
            interval: 500,
            position: 'right', // 设置Y轴显示在右边
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '昨日结案',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.criminalCase.decreasedYesterdayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '今日新增',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.criminalCase.addedTodayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '存量案件',
            type: 'bar',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.criminalCase.existingCasesList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        ]
      };
      this.myOption7 = option;
      myChart.setOption(option);
    },
    initCharts8() {
      var chartDom = document.getElementById('echarts8');
      var myChart = echarts.init(chartDom);
      this.myChart8 = myChart;
      var option;
      option = {
        grid: {
          top: '20%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['昨日结案', '今日新增', '存量案件']
        },
        xAxis: [
          {
            type: 'category',
            name: '案件阶段',
            data: ['收案', '立案', '审理', '结案'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 600,
            interval: 100,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '存量案件',
            min: 0,
            interval: 500,
            position: 'right', // 设置Y轴显示在右边
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '昨日结案',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.administrativeCase.decreasedYesterdayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '今日新增',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.administrativeCase.addedTodayList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          {
            name: '存量案件',
            type: 'bar',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.administrativeCase.existingCasesList,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        ]
      };
      this.myOption8 = option;
      myChart.setOption(option);
    },
    handleClick(tab, event) {
      if (this.activeName === 'first') {
        this.handleData1()
        if (this.myChart1 && this.myOption1) {
          this.myOption1.series[0].data = this.allCase.decreasedYesterdayList
          this.myOption1.series[2].data = this.allCase.existingCasesList
          this.myOption1.series[1].data = this.allCase.addedTodayList
          this.myChart1.setOption(this.myOption1);
        }

        if (this.myChart2 && this.myOption2) {
          this.myOption2.series[0].data = this.civilCase.decreasedYesterdayList
          this.myOption2.series[2].data = this.civilCase.existingCasesList
          this.myOption2.series[1].data = this.civilCase.addedTodayList
          this.myChart2.setOption(this.myOption2);
        }

        if (this.myChart3 && this.myOption3) {
          this.myOption3.series[0].data = this.criminalCase.decreasedYesterdayList
          this.myOption3.series[2].data = this.criminalCase.existingCasesList
          this.myOption3.series[1].data = this.criminalCase.addedTodayList
          this.myChart3.setOption(this.myOption3);
        }

        if (this.myChart4 && this.myOption4) {
          this.myOption4.series[0].data = this.administrativeCase.decreasedYesterdayList
          this.myOption4.series[2].data = this.administrativeCase.existingCasesList
          this.myOption4.series[1].data = this.administrativeCase.addedTodayList
          this.myChart4.setOption(this.myOption4);
        }
      } else {
        this.handleData2()
        this.$nextTick(() => {
          if (!this.myChart5 && !this.myOption5){
            this.initCharts5()
          }
          if (!this.myChart6 && !this.myOption6){
            this.initCharts6()
          }
          if (!this.myChart7 && !this.myOption7){
            this.initCharts7()
          }
          if (!this.myChart8 && !this.myOption8){
            this.initCharts8()
          }

          if (this.myChart5 && this.myOption5) {
            this.myOption5.series[0].data = this.allCase.decreasedYesterdayList
            this.myOption5.series[2].data = this.allCase.existingCasesList
            this.myOption5.series[1].data = this.allCase.addedTodayList
            this.myChart5.setOption(this.myOption5);
          }

          if (this.myChart6 && this.myOption6) {
            this.myOption6.series[0].data = this.civilCase.decreasedYesterdayList
            this.myOption6.series[2].data = this.civilCase.existingCasesList
            this.myOption6.series[1].data = this.civilCase.addedTodayList
            this.myChart6.setOption(this.myOption6);
          }

          if (this.myChart7 && this.myOption7) {
            this.myOption7.series[0].data = this.criminalCase.decreasedYesterdayList
            this.myOption7.series[2].data = this.criminalCase.existingCasesList
            this.myOption7.series[1].data = this.criminalCase.addedTodayList
            this.myChart7.setOption(this.myOption7);
          }

          if (this.myChart8 && this.myOption8) {
            this.myOption8.series[0].data = this.administrativeCase.decreasedYesterdayList
            this.myOption8.series[2].data = this.administrativeCase.existingCasesList
            this.myOption8.series[1].data = this.administrativeCase.addedTodayList
            this.myChart8.setOption(this.myOption8);
          }
        })

      }
    }
  }
};
</script>
<style scoped>

/deep/ .el-tabs__header{
  padding:0px 30px;
}


/deep/ .el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ececec;
  z-index: 1;
}

.container {
  width: 100%;
  height: calc(100vh - 50px);
  overflow: auto;
}

</style>